<template>
    <div class="wiv-dialog">
        <div class="wiv-dialog-body">
            <el-alert title="父传子用 props，子传父用 $emit"
                      type="warning"
                      :closable="false"
                      show-icon>
            </el-alert>
            我是个子组件，请求到 {{nLength}} 条数据。<br />
            姓名：{{data ? data.name : ''}}
        </div>
        <div class="wiv-dialog-foot">
            <el-button class="_primary"
                       @click="fFootBtnClick">关闭弹框</el-button>
        </div>
    </div>
</template>

<script>
    import { URLS_DEMO } from '@/urls.js';

    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        inject: {//注入默认的关闭弹框的方法
            fCloseDialog: {
                type: Function,
            },
        },
        //**** props, data, computed
        props: {
            data: {
                type: Object
            }
        },
        data() {
            return {
                nLength: 0,
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            this.fRequestData();
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //底部按钮点击事件
            fFootBtnClick() {
                this.fCloseDialog();
            },
            //*** 其他
            //数据请求
            fRequestData() {
                this.$WIV.fRequest({
                    url: URLS_DEMO.d_pagelist
                }).then(({ data: oData }) => {
                    this.nLength = oData.totalcount;
                });
            },
        }
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet" scoped>
</style>
